{% extends "SalarySysMenu/Main.html" %}
{% load staticfiles %}

{% block CSSAnotherhead %}
<link rel="stylesheet" href="{% static 'plugins/timepicker/bootstrap-timepicker.min.css'%}">
<link rel="stylesheet" href="{% static 'bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'%}">
{% endblock %}
{% block bodyhead %}
<body class="hold-transition skin-purple-light sidebar-mini" onload="initPage()">
 
  {% endblock %}
{% block MyReport %}
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-hand-paper-o"></i>
            <span> 业务申报登记</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="active"><a href="{% url 'GZGL:ReportWorking' %}"><i class="fa  fa-circle-o"></i> <span> 业绩申报</span></a></li> 
              <li><a href="{% url 'GZGL:ReportSalary' %}"><i class="fa fa-circle-o"></i> 工资异常申报</a></li>
              <li><a href="#mysign"><i class="fa fa-circle-o"></i> 考勤异常申报</a></li>
              <li><a href="{% url 'GZGL:ReportOther' %}"><i class="fa fa-circle-o"></i> 其他异常申报</a></li>
          </ul>
        </li>  
        {% endblock %}
{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        业务申报
        <small>业绩申报登记</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>

    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      <!--------------------------
        | Your Page Content Here |
        -------------------------->
        <div class="col-md-8">
            <!-- general form elements -->
            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">业务申报单（业绩单）</h3>
              </div>
              <!-- /.box-header -->
              <!-- form start -->
              <form role="form" method="POST">
                  {% csrf_token %}
                <div class="box-body">
                    <input type="hidden" name="showtype" id="exampleID" value="new">
                    <div class="form-group col-xs-6">
                      <label for="exampleID">业务申报类型</label>
                      <input type="text" class="form-control" id="exampleID" value="业绩信息申报" disabled>
                      <input type="hidden" name="type" class="form-control" id="exampleID" value="业绩信息申报">
                      </div>
                  <div class="form-group col-xs-6">
                    <label for="exampleID">您的员工ID</label>
                    
                    <input type="text" name="reportid" class="form-control" id="exampleID" placeholder="您的员工ID" value="{{here.staff_id}}" required>
                  </div>
                  <div class="form-group col-xs-6">
                    <label for="exampleInputname">您的姓名</label>
                    <input type="text" name="reportname" class="form-control" id="examplename" placeholder="您的姓名" value="{{here.staff_name}}" required>
                  </div>
                  <div class="form-group col-xs-6">
                      <label for="exampleChargeman">业务负责人</label>
                      <input type="text" name="chargeman" class="form-control" id="exampleChargeman" placeholder="项目负责人" required>
                    </div>
                    <div class="form-group col-xs-12">
                      <label for="exampleChargeman">业务名称</label>
                      <input type="text" name="namefile" class="form-control" id="exampleChargeman" placeholder="项目名称" required>
                    </div>
                    <div class="form-group col-xs-6">
                      <label for="inputBirthday">项目完成时间</label>
                        <div class="input-group date">
                          <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                          </div>
                          <input type="text" name="finishtime" class="form-control pull-right" id="datepicker" value="" placeholder="业务完成日期" required>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                      <label for="exampleInputname">项目涉及金额</label>
                      <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-rmb"></i></span>
                      <input type="text" name="money" class="form-control" id="examplename" placeholder="涉及金额（可不填）">
                      <span class="input-group-addon">元</span>
                    </div>
                  </div>
                  <div class="form-group col-xs-12">
                      <label>业务内容描述</label>
                      <textarea class="form-control" name="details" rows="3"  required></textarea>
                    </div>
                  <div class="form-group col-xs-12">
                      <label>备  注</label>
                      <textarea class="form-control" name="backup" rows="3" ></textarea>
                    </div>



                </div>
                <!-- /.box-body -->
  
                <div class="box-footer">
                    <button type="reset" class="btn btn-default">重置</button>
                  <button type="submit" class="btn btn-primary pull-right">提交</button>
                </div>
              </form>
            </div>
            <!-- /.box -->
          </div>  
          
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->


        {% endblock %}

        {% block JSFile %}

 <!-- jQuery 3 -->
 <script src="{% static 'bower_components/jquery/dist/jquery.min.js'%}" type="text/javascript"></script>
 <!-- Bootstrap 3.3.7 -->
 <script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js'%}" type="text/javascript" ></script>
 <script src="{% static 'bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js'%}"></script>
 <!-- AdminLTE App -->
 <script src="{% static 'dist/js/adminlte.min.js'%}" type="text/javascript"></script>
 <script src="{% static 'plugins/input-mask/jquery.inputmask.js'%}"></script>
 <script src="{% static 'plugins/timepicker/bootstrap-timepicker.min.js'%}"></script>
 
 
 <script src="{% static 'bower_components/bootstrap-daterangepicker/daterangepicker.js'%}"></script>
 <script src="{% static 'js/remodal.js'%}" type="text/javascript" ></script>
 
 
 <!-- Optionally, you can add Slimscroll and FastClick plugins.
      Both of these plugins are recommended to enhance the
      user experience. -->
      <script>
       $(function () {
           //Initialize Select2 Elements
        
       
           //Datemask dd/mm/yyyy
           $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
       
           //Money Euro
           $('[data-mask]').inputmask()
       
           //Date picker
           $('#datepicker').datepicker({
             format: 'yyyy-mm-dd',
             autoclose: true
       
           })
       
       
         })
           </script>
           <script>
              $(document).on('opening', '.remodal', function () {
                console.log('opening');
              });
            
              $(document).on('opened', '.remodal', function () {
                console.log('opened');
              });
            
              $(document).on('closing', '.remodal', function (e) {
                console.log('closing' + (e.reason ? ', reason: ' + e.reason : ''));
              });
            
              $(document).on('closed', '.remodal', function (e) {
                console.log('closed' + (e.reason ? ', reason: ' + e.reason : ''));
              });
            
              $(document).on('confirmation', '.remodal', function () {
                console.log('confirmation');
              });
            
              $(document).on('cancellation', '.remodal', function () {
                console.log('cancellation');
              });
            
            </script>
                 {% endblock %}
 